<template>
    <div>
        <div style="width: 1300px;margin: auto;">
            <div style="text-align: left;">
                <el-button class="el-icon-edit" @click="index">首页</el-button>
                <span> >> </span>
                <el-button class="el-icon-circle-plus-outline" @click="workInfo">详情页</el-button>
            </div>
        </div>
        <div><p style="font-size: 30px">《{{bookList.title}}》正文</p></div>
        <div style="margin-right: 1000px;font-size: 30px;font-weight: bold"><p>正文卷·共{{count}}章</p></div>
        <el-divider></el-divider>
        <div  style="width: 950px;height: 3200px;margin: auto;text-align: center">
            <div v-for="(i,index) in chapter" :key="index" style="width: 300px;height: 50px;float:left;text-align: left" ><el-button @click="read(i.cid)">{{i.title}}</el-button></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "contents",
        data(){
            return{
                chapter:{},
                bookList:[],
                count:null,
            }
        },
        created() {
            this.$http.post("chapter/contents",{novel_id:this.$route.params.id}).then(response=>{
                this.chapter=response.data;
            })
            this.$http.post("nove/findById",{id:this.$route.params.id}).then(response=>{
                this.bookList=response.data;
            })
            this.$http.post("chapter/count",{novel_id:this.$route.params.id}).then(response=>{
                this.count=response.data;
            })
        },
        methods:{
            index(){
                this.$router.replace("/")
            },
            workInfo(){
                this.$router.replace({name:'workinfo',query:{id:this.bookList.id,category:this.bookList.category}});
            },
            read(cid){
                if(sessionStorage.getItem("token")===null){
                    this.$router.replace({
                        name: 'read',
                        query: {id: this.bookList.id, pageNum: cid}
                    })
                }else{
                    const list = {
                        user_id: localStorage.getItem("id"),
                        nove_id: this.bookList.id,
                        novel_chapter_id: id,
                        create_time: this.newDate
                    }
                    this.$http.post("state/save", list).then(response => {
                        if (response.status === 200) {
                            this.$router.replace({
                                name: 'read',
                                params: {id: this.bookList.id, novel_chapter_id: id}
                            })
                        } else {
                            location.reload()
                        }
                    })
                }

            }
        }
    }
</script>

<style scoped>

</style>
